<template>
    <el-badge :value="badge">
        <el-popover placement="bottom" trigger="hover" width="300">
            <template #reference>
                <i class="el-icon-message-solid"/>
            </template>
            <el-tabs v-model="activeName">
                <el-tab-pane :label="translate('label.notice')" name="notice">
                    <div class="notice-list">
                        <el-scrollbar>
                            <ul>
                                <li v-for="(item, index) in list" :key="index">
                                    <el-avatar :size="45" :src="item.image"/>
                                    <span v-html="item.notice"/>
                                </li>
                            </ul>
                        </el-scrollbar>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="translate('label.mail')" name="email">
                    <div class="notice-list">
                        <el-scrollbar>
                            <ul>
                                <li v-for="(item, index) in list" :key="index">
                                    <el-avatar :size="45" :src="item.image"/>
                                    <span>{{ item.email }}</span>
                                </li>
                            </ul>
                        </el-scrollbar>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div class="notice-clear" @click="handleClearNotice">
                <el-button type="text">
                    <vab-icon icon="close-circle-line"/>
                    <span>{{ translate('label.emptying') }}</span>
                </el-button>
            </div>
        </el-popover>
    </el-badge>
</template>

<script lang="ts">
import {Component} from 'vue-property-decorator';
import BaseVue from "@/common/base-vue";
import {SettingsGetterEnum} from '@/store/enum/store.enum'

@Component({components: {}})
export default class VabNotice extends BaseVue {
    private activeName: string = 'notice';
    private badge: object = null;
    private list = [];

    get theme() {
        return this.$store.getters[SettingsGetterEnum.theme]
    };

    private handleClearNotice() {
        this.badge = null;
        this.list = [];
        this.baseMessage(
            this.translate('label.emptySuccess'),
            'success',
            false,
            'vab-hey-message-success'
        )
    };
}
</script>

<style lang="scss" scoped>
::v-deep {
    .el-tabs__active-bar {
        min-width: 28px;
    }
}

.notice-list {
    height: 29vh;

    ul {
        padding: 0 15px 0 0;
        margin: 0;

        li {
            display: flex;
            align-items: center;
            padding: 10px 0 10px 0;

            ::v-deep {
                .el-avatar {
                    flex-shrink: 0;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
            }

            span {
                margin-left: 10px;
            }
        }
    }
}

.notice-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 0 0;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #e8eaec;

    i {
        margin-right: 3px;
    }
}
</style>
